<script lang="ts" setup>
// api
import { postUploadAPI } from '@/api/doctorDetail';
// 组件
import comNextButton from '../components/common/com-nextButton/com-nextButton.vue';
import comUploader from '@/components/common/com-uploader/com-uploader.vue';
import comTextArea from '@/components/common/com-textArea/com-textArea.vue'
import comSelect from '@/components/common/com-select/com-select.vue';
import comIcon from '@/components/common/com-icon/com-icon.vue';
import comNavigation from '@/components/common/com-navigationBar/com-navigation.vue';
// 类型
import type { DocDetail } from '@/types/healthEncyclopedia';
// vue
import { ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { usePatientStore } from '@/store/modules/patient';
const store = usePatientStore()
const router = useRouter()
const docData: DocDetail = JSON.parse(localStorage.getItem("docDetailData") as string)
// 患病时间
const time = ref([
  {
    text: '一周内',
    value: 1
  },
  {
    text: '一月内',
    value: 2
  },
  {
    text: '半年内',
    value: 3
  },
  {
    text: '大于半年',
    value: 4
  }
])
const medical = ref([
  {
    text: "就诊过",
    value: 1
  },
  {
    text: "没就诊过",
    value: 0
  }
])
// 患病时间
const changeTime = (val: { text: string, value: number }) => {
  store.illnessTime = val?.value
}
// 医院就诊
const changeMedical = (val: { text: string, value: number }) => {
  store.consultFlag = val?.value
}
// 禁用按钮
const disabled = ref<boolean>(true)
const onChange = (val: string) => {
  store.illnessDesc = val
}
watchEffect(() => {
  if (store.illnessDesc.length > 0 && store.illnessTime && store.consultFlag !== undefined) {
    disabled.value = false
  } else {
    disabled.value = true
  }
})

// 下一步
const next = () => {
  router.push('/choosePatient')
}
</script>
<template>
  <comNavigation>
    <template #title>
      <div class="title">
        图文问诊
      </div>
    </template>
  </comNavigation>
  <div class="box">
    <div class="top">
      <div class="left">
        <img class="docImg" v-if="docData" :src="docData.avatar" alt="">
        <comIcon class="docImg" v-else name="icons-user-doctor-portrait"></comIcon>
      </div>
      <div class="right">
        <div class="name" v-if="docData">
          {{ docData.name }}
        </div>
        <div class="name" v-else>
          在线医生
        </div>
        <div class="desc">
          请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
        </div>
        <p>
          <comIcon class="descIcon" name="icons-consult-safe"></comIcon><span class="tips">内容仅医生可见</span>
        </p>
      </div>
    </div>
    <!-- 文本域 -->
    <comTextArea @onChange="onChange"></comTextArea>
    <div class="question-box">
      <div class="top">
        本次患病多久了？
      </div>
      <comSelect :arr="medical" @changeText="changeMedical"></comSelect>
    </div>
    <div class="question-box" style="padding: 0;">
      <div class="top">
        此次病情是否去医院就诊过？
      </div>
      <comSelect :arr="time" @changeText="changeTime"></comSelect>
    </div>
    <div class="question-box">
      <comUploader :fn="postUploadAPI"></comUploader>
    </div>
    <comNextButton :disabled="disabled" @onClick="next"></comNextButton>
  </div>
</template>
<style lang="scss" scoped>
.title {
  font-size: 16px;
}

.box {
  padding: 0 15px;

  .top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 25px;

    .left {
      .docImg {
        width: 54px;
        height: 54px;
        margin-right: 10px;
      }
    }

    .right {
      flex: 1;

      .name {
        font-size: 16px;
        margin-bottom: 5px;
      }

      .desc {
        margin: 4px 0;
        padding: 10px;
        color: #6f6f6f;
        font-size: 13px;
        background-color: #fafafa;
      }

      p {
        color: #6f6f6f;
        margin: 0;
        display: flex;
        align-items: center;

        .descIcon {
          width: 12px;
          height: 12px;
        }

        .tips {
          font-size: 10px;
        }
      }
    }
  }

  .question-box {
    padding: 15px 0;

    .top {
      margin-bottom: 15px;
      font-size: 14px;
    }
  }
}
</style>
